<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 50px;
				height: 50px;
				background-color: deepskyblue;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div>

		</div>
		<script type="text/javascript">
			var div = document.querySelector('div');

			var startX = 0; //获取手指初始坐标
			var startY = 0;

			var x = 0; //获得盒子原来的位置
			var y = 0;

			//得到手指在盒子内的坐标
			div.addEventListener('touchstart', function(e) {
				startX = e.targetTouches[0].pageX;
				startY = e.targetTouches[0].pageY;

				x = this.offsetLeft;
				y = this.offsetTop;
			})

			//移动
			div.addEventListener('touchmove', function(e) {
				var moveX = e.targetTouches[0].pageX - startX;
				var moveY = e.targetTouches[0].pageY - startY;

				this.style.left = moveX + x + 'px';
				this.style.top = moveY + y + 'px';


				//组织屏幕滚动的默认行为
				e.preventDefault();
			});
		</script>
	</body>
</html>
